<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper, { Navigation, Pagination } from 'swiper' // 引入swiper.js文件
import 'swiper/swiper-bundle.min.css' // 引入swiper-bundle.min.css文件
Swiper.use([Navigation, Pagination])

export default {
  data () {
    return {
      img: 'https://static.maizuo.com/v5/upload/189bcf606b4bf49ad5de201a2ea5024d.jpg?x-oss-process=image/quality,Q_70'
    }
  },
  mounted () {
    new Swiper('.swiper-container', {
      loop: true,
      pagination: {
        el: '.swiper-pagination'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
  .swiper-wrapper {
    img {
      width: 100%;
      height: 200px;
    }
  }
</style>
